<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单信息</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="/yunfu/Public/Css/my.css" rel="stylesheet">

    <script src="/yunfu/Public/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #f0f0f0">
<div class="container" id="main-container">
    <div class="row top">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="left">
        <img src="/yunfu/Public/images/back-white.png" align="center" id="back">
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" align="center">
        <span>订单信息</span>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="right">
        <img src="/yunfu/Public/images/home.png" align="center" id="home">
    </div>
</div>
<script>
    mBind("<?php echo U('Index/index');?>");
</script>
    <!-- tab  -->
    <div class="row order-tab">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 order-tab-active" id="not-paid" style="border-right: ridge"
             align="center" onclick="onTabClick('not-paid')">
            待支付订单
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="succeed" style="border-right: ridge" align="center"
             onclick="onTabClick('succeed')">
            成功订单
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="fail" align="center" onclick="onTabClick('fail')">
            失败订单
        </div>
    </div>

    <!--not-paid-content-->
    <div id="not-paid-content">
        <!-- not-paid list foreach goes here -->
        <?php if(empty($json["orders"])): ?><div class="row" style="margin-top:20px;font-size: larger;color:gray;font-weight: bold;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
                    没有未支付订单!
                </div>
            </div>
            <?php else: ?>
            <?php if(is_array($json["orders"])): foreach($json["orders"] as $key=>$waitOrder): ?><div class="row order-item">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                <span>待支付</span>
                                <span style="color:red;font-size: x-small;">*请于<?php echo ($waitOrder["locktime"]); ?>前支付</span>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="right">
                                <span>总价:&nbsp;  <span style="color:red;">￥<?php echo ($waitOrder["ticketamt"]); ?></span></span>
                            </div>
                        </div>
                        <div class="row" onclick="onOrderItemClick('<?php echo ($waitOrder["orderid"]); ?>')">
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <?php echo ($waitOrder["start_station"]); ?>-<?php echo ($waitOrder["end_station"]); ?><br>
                                <span class="time">发车时间:<?php echo ($waitOrder["sch_date"]); ?> &nbsp;<?php echo ($waitOrder["sch_time"]); ?></span>
                            </div>
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="right">
                                <img src="/yunfu/Public/images/arrow-right-50.png">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="right">
                                <div style="float:left;display:inline;color:gray;font-size: x-small">
                                    下单时间:<?php echo ($waitOrder["create_time"]); ?>
                                </div>
                                <div class="order-bn" onclick="onCancel('<?php echo ($waitOrder["orderid"]); ?>')">取消订单</div>
                                <div class="order-bn" onclick="onPay('<?php echo ($waitOrder["orderid"]); ?>')">立即支付</div>
                            </div>
                        </div>
                    </div>
                </div><?php endforeach; endif; endif; ?>
    </div>

    <!--succeed content-->
    <div id="succeed-content" hidden="hidden">
    </div>
    <!--fail content-->
    <div id="fail-content" hidden="hidden">
    </div>

    <div class="row" style="margin-top: 20px;margin-bottom: 20px;" id="load-more-wait-content">
        <div class="load-more-bn col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1"
             onclick="loadMoreWaitOrder()" align="center" id="load-more-wait">
            加载更多
        </div>
    </div>
    <div class="row" hidden="hidden" style="margin-top: 20px;margin-bottom: 20px;" id="load-more-succeed-content">
        <div class="load-more-bn col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1"
             onclick="loadMoreSucceedOrder()" align="center" id="load-more-succeed">
            加载更多
        </div>
    </div>
    <div class="row" hidden="hidden" style="margin-top: 20px;margin-bottom: 20px;" id="load-more-fail-content">
        <div class="load-more-bn col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1"
             onclick="loadMoreFailOrder()" align="center" id="load-more-fail">
            加载更多
        </div>
    </div>

</div>
<!--进度条-->
<div class="container">
    <div class="row" style="position: fixed;top: 40%;left: 45%;display: none;background-color: white;border-radius: 3px;" id="progress">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <img src="/yunfu/Public/images/progress.gif">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        //存储初始显示的未支付订单数量
        window.localStorage.setItem("numberOfCurrentWaitOrder", '<?php echo ($json["count"]); ?>');
        window.localStorage.setItem("numberOfCurrentSucceedOrder", 0);
        window.localStorage.setItem("numberOfCurrentFailOrder", 0);

        document.getElementsByTagName("body").addEventListener()
    });
    //显示未支付tab页面
    function showNotPaidContent(){
        $("#not-paid").addClass('order-tab-active');
        $("#succeed").removeClass('order-tab-active');
        $("#fail").removeClass('order-tab-active');
        $("#not-paid-content").removeAttr("hidden");
        $("#succeed-content").attr("hidden", "hidden");
        $("#fail-content").attr("hidden", "hidden");

        $("#load-more-wait-content").removeAttr("hidden");
        $("#load-more-succeed-content").attr("hidden", "hidden");
        $("#load-more-fail-content").attr("hidden", "hidden");
    }
    //显示成功订单tab页面
    function showSucceedContent(){
        $("#succeed").addClass('order-tab-active');
        $("#not-paid").removeClass('order-tab-active');
        $("#fail").removeClass('order-tab-active');
        $("#not-paid-content").attr("hidden", "hidden");
        $("#succeed-content").removeAttr("hidden");
        $("#fail-content").attr("hidden", "hidden");
        //第一次点击时，调用一次loadMoreSucceedOrder();
        var numberOfCurrentSucceedOrder = parseInt(window.localStorage.getItem("numberOfCurrentSucceedOrder"));
        if (numberOfCurrentSucceedOrder == 0) {
            loadMoreSucceedOrder();
        }

        $("#load-more-succeed-content").removeAttr("hidden");
        $("#load-more-wait-content").attr("hidden", "hidden");
        $("#load-more-fail-content").attr("hidden", "hidden");
    }
    //显示失败订单tab页面
    function showFailContent() {
        $("#fail").addClass('order-tab-active');
        $("#succeed").removeClass('order-tab-active');
        $("#not-paid").removeClass('order-tab-active');
        $("#not-paid-content").attr("hidden", "hidden");
        $("#succeed-content").attr("hidden", "hidden");
        $("#fail-content").removeAttr("hidden");
        //第一次点击时，调用一次loadMoreFailOrder();
        var numberOfCurrentFailOrder = parseInt(window.localStorage.getItem("numberOfCurrentFailOrder"));
        if (numberOfCurrentFailOrder == 0) {
            loadMoreFailOrder();
        }
        $("#load-more-fail-content").removeAttr("hidden");
        $("#load-more-succeed-content").attr("hidden", "hidden");
        $("#load-more-wait-content").attr("hidden", "hidden");
    }
    function onTabClick(which) {
        switch (which) {
            //待支付订单
            case 'not-paid':
                showNotPaidContent();
                break;
            //成功订单
            case 'succeed':
                showSucceedContent();
                break;
            //失败订单
            case 'fail':
                showFailContent();
                break;
        }
    }
    //查看订单详情
    function onOrderItemClick(orderId) {
        alert(orderId);
        var url = "<?php echo U('Order/detail');?>&orderId=" + orderId;
        window.location.href = url;
    }

    function loadMoreWaitOrder() {
        if ($("#load-more-wait").html() == "所有订单已加载完了!") {
            return;
        }
        showProgress();
        $("#load-more-wait").css("onclick", "");//禁用加载更多按钮，防止双击时重复加载数据
        $("#load-more-wait").html("加载中...");
        var numberOfCurrentWaitOrder = window.localStorage.getItem("numberOfCurrentWaitOrder");
        var type = 0;//未支付订单
        var param = {
            start: numberOfCurrentWaitOrder,//开始下表
            type: type //订单类型
        };
        $.ajax({
            type: 'post',
            url: "<?php echo U('more');?>",
            dataType: 'json',
            data: param,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                var orderCount = json.count;
                if (orderCount == 0) {
                    hideProgress();
                    $("#load-more-wait").html("所有订单已加载完了!");
                    $("#load-more-wait").css("onclick", "");
                } else {
                    //加载订单
                    $.each(json.orders, function (index, order) {
                        var html = '';
                        html += '<div class="row order-item">';
                        html += '   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">';
                        html += '               <span>未支付</span>';
                        html += '               <span style="color:red;font-size: x-small;">*请于'+ order.locktime +'前支付</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="right">';
                        html += '               <span>总价:&nbsp; <span style="color:red;">￥' + order.ticketamt + '</span></span>';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row" onclick="onOrderItemClick(' + "'" + order.orderid + "'" + ')">';
                        html += '           <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">';
                        html += '               ' + order.start_station + '-' + order.end_station + '<br>';
                        html += '               <span class="time">发车时间:' + order.sch_date + ' &nbsp;' + order.sch_time + '</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="right">';
                        html += '               <img src="/yunfu/Public/images/arrow-right-50.png">';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="right">';
                        html += '               <div style="display:inline;float:left;color:gray;font-size: x-small;">';
                        html += '                   下单时间:' + order.create_time;
                        html += '               </div>';
                        html += '               <div class="order-bn" onclick="onCancel(' + "'" + order.orderid + "'" + ')">取消订单</div>';
                        html += '               <div class="order-bn" onclick="onPay(' + "'" + order.orderid + "'" + ')">立即支付</div>';
                        html += '           </div>';
                        html += '       <div>';
                        html += '   </div>';
                        html += '</div>';
                        $("#not-paid-content").append(html);
                    });
                    if (orderCount < 5) {
                        $("#load-more-wait").html("所有订单已加载完了!");
                        $("#load-more-wait").css("onclick", "");
                    } else {
                        $("#load-more-wait").html("加载更多");
                    }
                    //更新显示的未支付订单数量
                    window.localStorage.setItem("numberOfCurrentWaitOrder", parseInt(numberOfCurrentWaitOrder) + orderCount);
                    //启用加载更多按钮
                    $("#load-more-wait").css("onclick", "loadMoreWaitOrder()");
                    hideProgress();
                }
            },
            error: function (msg) {
                hideProgress();
                alert('加载失败,请检查网路');
            }
        });
    }

    function loadMoreSucceedOrder() {
        if ($("#load-more-succeed").html() == "所有订单已加载完了!") {
            return;
        }
        showProgress();
        $("#load-more-succeed").css("onclick", "");//禁用加载更多按钮，防止双击时重复加载数据
        $("#load-more-succeed").html("加载中...");
        var numberOfCurrentSucceedOrder = window.localStorage.getItem("numberOfCurrentSucceedOrder");
        if (typeof numberOfCurrentSucceedOrder == "undefined" || typeof numberOfCurrentSucceedOrder == "null") {
            numberOfCurrentSucceedOrder = 0;
        }
        var type = 1;//成功
        var param = {
            start: numberOfCurrentSucceedOrder,//开始下表
            type: type //订单类型
        };
        $.ajax({
            type: 'post',
            url: "<?php echo U('more');?>",
            dataType: 'json',
            data: param,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                var orderCount = json.count;
                if (orderCount == 0) {
                    hideProgress();
                    $("#load-more-succeed").html("所有订单已加载完了!");
                    $("#load-more-succeed").css("onclick", "");
                } else {
                    //加载订单
                    $.each(json.orders, function (index, order) {
                        var html = '';
                        html += '<div class="row order-item">';
                        html += '   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">';
                        html += '               <span>支付成功</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="right">';
                        html += '               <span>总价:&nbsp; <span style="color:red;">￥' + order.ticketamt + '</span></span>';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row" onclick="onOrderItemClick(' + "'" + order.orderid + "'" + ')">';
                        html += '           <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">';
                        html += '               ' + order.start_station + '-' + order.end_station + '<br>';
                        html += '               <span class="time">发车时间:' + order.sch_date + ' &nbsp;' + order.sch_time + '</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="right">';
                        html += '               <img src="/yunfu/Public/images/arrow-right-50.png">';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="right">';
                        html += '               <div style="display:inline;float:left;color:gray;font-size: x-small;">';
                        html += '                   下单时间:' + order.create_time;
                        html += '               </div>';
                        html += '               <div class="order-bn" onclick="onRefund('+ "'" + order.orderid + "'" + ')">我要退票</div>';
                        html += '           </div>';
                        html += '       <div>';
                        html += '   </div>';
                        html += '</div>';
                        $("#succeed-content").append(html);
                    });
                    if (orderCount < 5) {
                        $("#load-more-succeed").html("所有订单已加载完了!");
                        $("#load-more-succeed").css("onclick", "");
                    } else {
                        $("#load-more-succeed").html("加载更多");
                    }
                    //更新显示的成功订单数量
                    window.localStorage.setItem("numberOfCurrentSucceedOrder", parseInt(numberOfCurrentSucceedOrder) + orderCount);
                    //启用加载更多按钮
                    $("#load-more-succeed").css("onclick", "loadMoreSucceedOrder()");
                    hideProgress();
                }
            },
            error: function (msg) {
                hideProgress();
                alert('加载失败,请检查网路');
            }
        });
    }

    function loadMoreFailOrder() {
        if ($("#load-more-fail").html() == "所有订单已加载完了!") {
            return;
        }
        showProgress();
        $("#load-more-fail").css("onclick", "");//禁用加载更多按钮，防止双击时重复加载数据
        $("#load-more-fail").html("加载中...");
        var numberOfCurrentFailOrder = window.localStorage.getItem("numberOfCurrentFailOrder");
        if (typeof numberOfCurrentFailOrder == "undefined" || typeof numberOfCurrentFailOrder == "null") {
            numberOfCurrentFailOrder = 0;
        }
        var type = 2;//未支付订单
        var param = {
            start: numberOfCurrentFailOrder,//开始下表
            type: type //订单类型
        };
        $.ajax({
            type: 'post',
            url: "<?php echo U('more');?>",
            dataType: 'json',
            data: param,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                var orderCount = json.count;
                if (orderCount == 0) {
                    hideProgress();
                    $("#load-more-fail").html("所有订单已加载完了!");
                    $("#load-more-fail").css("onclick", "");
                } else {
                    //加载订单
                    $.each(json.orders, function (index, order) {
                        var html = '';
                        html += '<div class="row order-item">';
                        html += '   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">';
                        html += '               <span>失败订单</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="right">';
                        html += '               <span>总价:&nbsp; <span style="color:red;">￥' + order.ticketamt + '</span></span>';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row" onclick="onOrderItemClick(' + "'" + order.orderid + "'" + ')">';
                        html += '           <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">';
                        html += '               ' + order.start_station + '-' + order.end_station + '<br>';
                        html += '               <span class="time">' + order.sch_date + ' &nbsp;' + order.sch_time + '</span>';
                        html += '           </div>';
                        html += '           <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="right">';
                        html += '               <img src="/yunfu/Public/images/arrow-right-50.png">';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="row">';
                        html += '           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="color:gray;font-size: x-small;">';
                        html += '               下单时间:' + order.create_time;
                        html += '       </div>';
                        html += '   </div>';
                        html += '</div>';
                        $("#fail-content").append(html);
                    });
                    if (orderCount < 5) {
                        $("#load-more-fail").html("所有订单已加载完了!");
                        $("#load-more-fail").css("onclick", "");
                    } else {
                        $("#load-more-fail").html("加载更多");
                    }
                    //更新显示的失败订单数量
                    window.localStorage.setItem("numberOfCurrentFailOrder", parseInt(numberOfCurrentFailOrder) + orderCount);
                    //启用加载更多按钮
                    $("#load-more-fail").css("onclick", "loadMoreFailOrder()");
                    hideProgress();
                }
            },
            error: function (msg) {
                hideProgress();
                alert('加载失败,请检查网路');
            }
        });
    }

    //取消订单
    function onCancel(orderId) {
        alert(orderId);
    }
    //支付订单
    function onPay(orderId) {
        alert(orderId);
    }
    //退票
    function onRefund(orderId) {
        alert(orderId);
    }

    $("$main-container").bind({
        'touchstart mousedown':function(event){
            alert('start');
        },
        'touchmove mousemove':function(event){
            alert('move');
        },
        'touchend mouseup':function(event){
            alert('end');
        }
    })

</script>
</body>
</html>